<script setup>
import {ref} from "vue";
import courseImage1 from '@/assets/images/course/从“耗竭”到“赋能”：教育者的压力管理与自我关怀艺术.jpg'
import courseImage2 from '@/assets/images/course/团体心理辅导实战指南：在班会与活动中促进学生成长.jpg'
import courseImage3 from '@/assets/images/course/家校协同，共育未来：如何引导家长进行有效家庭教育.jpg'
import courseImage4 from '@/assets/images/course/成为学生的“心理充电站”：校园心理危机早期识别与干预.jpg'
import courseImage5 from '@/assets/images/course/沟通的“心”桥梁：与学生、家长的高效谈心技术.jpg'
import courseImage6 from '@/assets/images/course/读懂“00后10后”：青少年心理发展特点与班级管理.jpg'
import router from "@/router/index.js";

const courseList = ref([
  {
    id: 1,
    title: '从“耗竭”到“赋能”：教育者的压力管理与自我关怀艺术',
    img: courseImage1,
    playCount: 1.5,
    lessonNum: 21,
    is0Base: 1,
  },
  {
    id: 1,
    title: '团体心理辅导实战指南：在班会与活动中促进学生成长',
    img: courseImage2,
    playCount: 0.4,
    lessonNum: 8,
    is0Base: 1,
  },
  {
    id: 1,
    title: '家校协同，共育未来：如何引导家长进行有效家庭教育',
    img: courseImage3,
    playCount: 0.5,
    lessonNum: 8,
    is0Base: 1,
  },
  {
    id: 1,
    title: '成为学生的“心理充电站”：校园心理危机早期识别与干预',
    img: courseImage4,
    playCount: 1.6,
    lessonNum: 20,
    is0Base: 1,
  },
  {
    id: 1,
    title: '沟通的“心”桥梁：与学生、家长的高效谈心技术',
    img: courseImage5,
    playCount: 1.1,
    lessonNum: 16,
    is0Base: 1,
  },
  {
    id: 1,
    title: '读懂“00后10后”：青少年心理发展特点与班级管理',
    img: courseImage6,
    playCount: 0.8,
    lessonNum: 20,
    is0Base: 1,
  }
])
</script>

<template>
<div class="course-box">
  <el-scrollbar height="100%">
    <div class="course-list">
      <div class="course-item" v-for="course in courseList.slice(0, 4)" :key="course.id" @click="router.push(`/course/info`)">
        <div class="item-top" :style="{ 'background-image': `url(${course.img})` }"></div>
        <div class="item-bottom">
          <div class="item1">{{ course.title }}</div>
          <div class="item2">{{ course.playCount }}万</div>
          <div class="item3">{{course.is0Base ? '0基础' : ''}}</div>
          <div class="item4">共{{course.lessonNum}}节</div>
        </div>
      </div>
    </div>
    <div class="course-list-last-line">
      <div class="course-item" v-for="course in courseList.slice(4, 9)" :key="course.id" @click="router.push(`/course/info`)">
        <div class="item-top" :style="{ 'background-image': `url(${course.img})` }"></div>
        <div class="item-bottom">
          <div class="item1">{{ course.title }}</div>
          <div class="item2">{{ course.playCount }}万</div>
          <div class="item3">{{course.is0Base ? '0基础' : ''}}</div>
          <div class="item4">共{{course.lessonNum}}节</div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</div>
</template>

<style scoped>
.course-box {
  padding: 10px;
  background-color: #f9f9f9;
  height: 85vh;
}
.course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 15px;
  height: 100%;
}
.course-list-last-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px 15px;
  height: 100%;
}
.course-list-last-line .course-item {
  margin-right: 5px;
}
.course-item {
  margin-bottom: 10px;
  height: 320px;
  width: 24%;
  background-color: white;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.course-item:hover {
  box-shadow: 8px 8px 8px #e4e4e4;
}
.course-item:hover .item-top {
  background-size: 380px 180px;
}
.item-top {
  height: 160px;
  border-radius: 10px 10px 0 0;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: all 0.5s ease;
}
.item-bottom {
  position: relative;
  padding: 12px;
  height: 146px;
}
.item1 {
  font-weight: 700
}
.item2 {
  font-size: 14px;color: rgba(0, 0, 0, 0.3)
}
.item3 {
  display: inline-block;
  padding: 3px;
  font-size: 12px;
  background-color: #fff4ed;
  color: #e9814f
}
.item4 {
  position: absolute;
  display: inline-block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
  bottom: 0;
  right: 20px
}
</style>
